<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>My Account</title>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
		<link rel="icon" href="<c:url value="/img/favicon.ico"/>"/>
		<link media="all" href="<c:url value="/css/base.css"/>"	type="text/css" rel="stylesheet" />
		<link media="all" href="<c:url value="/css/order.css"/>" type="text/css" rel="stylesheet" />
		<script type="text/javascript" src="<c:url value="/js/jquery-1.2.6.js"/>"></script>
		<script src="<c:url value="/js/base-v1.js"/>" type="text/javascript"></script>
		<!-- <style type="text/css">
			.o-list a.button12 {
				width: 95px;
				height: 20px;
				background: url(http://static.360buyimg.com/ept/cart/skin/i/btna.jpg)
					no-repeat;
				display: block;
				text-align: center;
				color: #5f330d;
				margin: 5px 5px 0px 0px;
				float: left;
				line-height: 20px;
			}
		</style> -->
	</head>
	
	<body>
		
		<jsp:include page="/jsp/shortcut.jsp" />
	
		<jsp:include page="/jsp/header.jsp" />
		
		
		<div class="w">
			<div class="left">
				<div class="affile m">
					<div class="mt">
						<h2>
							我的账户
						</h2>
					</div>
					<div class="mc">
						<ul>
							<li class="fore">
								<a href="<c:url value="/order/listOrders.action"/>">我的订单</a>
							</li>
							<li>
								<a href="">我的心愿单</a>
							</li>
							<li>
								<a href="">账户设置</a>
							</li>
						</ul>
					</div>
				</div>    
			</div>
			<div class="right">
				<div class="order m">
					<div class="mt" style="position: relative;">
						订单编号：&nbsp;<strong>${order.orderId }</strong>
					</div>
					<c:if test="${order.orderStatus > 0 }">
						<div class="mc">
							<div class="or1">
								<div class="line">.</div>
								<div class="items">
									<div class="item${order.statusDate.pending == null ? 1 : 3 }">
										<c:if test="${order.statusDate.pending == null}">
											<em>1</em>
										</c:if>
										<span>待付款</span> 
										<span class="time">
											<fmt:formatDate value="${order.statusDate.pending }"  pattern="yyyy-MM-dd"/> <br/>
											<fmt:formatDate value="${order.statusDate.pending }"  pattern="hh:mm:ss"/>
										</span>
									</div>
									<div class="item${order.statusDate.payed == null ? 1 : 3 }">
										<c:if test="${order.statusDate.payed == null}">
											<em>2</em>
										</c:if>
										<span>付款成功</span>
										<span class="time">
											<fmt:formatDate value="${order.statusDate.payed }"  pattern="yyyy-MM-dd"/> <br/>
											<fmt:formatDate value="${order.statusDate.payed }"  pattern="hh:mm:ss"/>
										</span>
									</div>
									<div class="item${order.statusDate.processing == null ? 1 : 3 }">
										<c:if test="${order.statusDate.processing == null}">
											<em>3</em>
										</c:if>
										<span>影像处理</span>
										<span class="time">
											<fmt:formatDate value="${order.statusDate.processing }"  pattern="yyyy-MM-dd"/> <br/>
											<fmt:formatDate value="${order.statusDate.processing }"  pattern="hh:mm:ss"/>
										</span>
									</div>
									<div class="item${order.statusDate.shipped == null ? 1 : 3 }">
										<c:if test="${order.statusDate.shipped == null}">
											<em>4</em>
										</c:if>
										<span>待收货</span>
										<span class="time">
											<fmt:formatDate value="${order.statusDate.shipped }"  pattern="yyyy-MM-dd"/> <br/>
											<fmt:formatDate value="${order.statusDate.shipped }"  pattern="hh:mm:ss"/>
										</span>
									</div>
									<div class="item${order.statusDate.completed == null ? 1 : 3 }">
										<c:if test="${order.statusDate.completed == null}">
											<em>5</em>
										</c:if>
										<span>交易完成</span>
										<span class="time">
											<fmt:formatDate value="${order.statusDate.completed }"  pattern="yyyy-MM-dd"/> <br/>
											<fmt:formatDate value="${order.statusDate.completed }"  pattern="hh:mm:ss"/>
										</span>
									</div>
								</div>
							</div>
							<div class="list" id="orderProcessInfo"></div>
							<div class="p-list" id="orderShipInfo"></div>
						</div>
					</c:if>
					<div class="mt">收件人信息</div>
					<div class="mc">
						<div class="r-list">
							<div class="mcc">
								<div class="r1">姓名:</div>
								<div class="r2">${order.consignee.name }</div>
								<div class="r1">地址:</div>
								<div class="r2">${order.consignee.address }</div>
								<div class="r1">城市:</div>
								<div class="r2">${order.consignee.city }</div>
								<div class="r1">国家:</div>
								<div class="r2">${order.consignee.country }</div>
								<div class="r1">省:</div>
								<div class="r2">${order.consignee.province }</div>
								<div class="r1">邮政编码:</div>
								<div class="r2">${order.consignee.postCode }</div>
								<div class="r1">联系电话:</div>
								<div class="r2">${order.consignee.phone }</div>
								<div class="r1">邮箱:</div>
								<div class="r2">${order.consignee.email }</div>
							</div>
						</div>
					</div>
					<div class="mt">订单项目</div>
					<div class="mc">
						<div class="d-list">
							<div class="mtt">
								<span class="q1">商品编号</span>
								<span class="q2">商品名称</span>
								<span class="q3">价格</span>
								<span class="q4">数量</span>
								<span class="q5">总价</span>
	
							</div>
							<div class="mcc">
								<c:forEach items="${order.items }" var="item">
									<ul>
										<li>
											<span class="d1">${item.id }</span>
											<span class="d2">
												${item.title }
											</span>
											<span class="d3">￥&nbsp;${item.price }元</span>
											<span class="d4">${item.count }</span>
											<span class="d5">￥&nbsp;${item.price * item.count }元</span>
										</li>
									</ul>
								</c:forEach>
							</div>
						</div>
					</div>
					<div class="mt">费用信息</div>
					<div class="mc2">
						<ul>
							<li>
								<span class="one">商品总计 (${fn:length(order.items)}件) :</span>
								<label>￥&nbsp;${order.categoryPrice }元</label>
							</li>
							<li>
								<span class="one">运费 : </span>
								<label>￥&nbsp;${order.shippingFee }元</label>
							</li>
							<li>
								<span class="one">折扣 :</span>
								<label>￥&nbsp;${order.discount }元</label>
							</li>
							<li>
								<span class="one">总价 : </span>
								<label class="all">￥&nbsp;${order.totalPrice }元</label>
							</li>
							<li><a href="#"></a></li>
						</ul>
					</div>
				</div>
			</div>
			<span class="clr"></span>
		</div>
		
		<script type="text/javascript" src="<c:url value="/js/orderinfo.js"/>"></script>
		<jsp:include page="/jsp/bottom.jsp" />
		<script src="<c:url value="/js/lib-v1.js"/>"  type="text/javascript"></script>
		
	</body>
</html>

